<section class="img-bg-center img-bg-soft dark-bg" style="background-image: url([[university.primary_image.thumb]])">
    <div class="container inner-top-md">
        <div class="row">
            <div class="col-sm-12 animated">
                <h1 ng-bind="university.name"></h1>
            </div><!-- /.col -->
        </div>
    </div>
</section>

<section>
    <div class="container">
        <div class="row inner-top-xs reset-xs">

            <div class="col-sm-7 inner-top-xs inner-right-xs animated">
                <p ng-bind-html="university.long_description"></p>
            </div><!-- /.col -->

            <div class="col-sm-4 col-sm-offset-1 outer-top-xs inner-left-xs border-left animated">
                
                <img ng-if="university.logo_url!=null" ng-src="[[university.logo_url]]" style="max-width: 128px; height: auto; margin-bottom: 16px;">
                <img class="media-object" ng-if="university.logo_url==null" src="/static/images/uni-logo-default.png" style="margin-bottom: 16px;">

                <ul class="item-details">
                    <li class="icon-location"><span ng-bind="university.region.name"></span>, <span ng-bind="university.region.country.name"></span></li>                    
                    <li class="icon-table">Rank: <span ng-bind="university.rank"></span></li>
                    <li class="icon-money">Avg. Tuition Fee: &pound;<span ng-bind="university.tuition"></span></li>
                    <li class="icon-users">International Students: <span ng-bind="university.international_student"></span>%</li>
                    <li class="icon-thumbs-up">Satisfaction: <span ng-bind="university.satisfaction"></span>%</li>
                </ul><!-- /.item-details -->
            </div><!-- /.col -->
        </div>

        <section ng-if="images.length>0">
            <div class="container inner-top-md">
                <div class="row">
                    <div class="col-sm-12">
                        <div id="accordion" class="panel-group">
                            <div class="panel panel-default">

                                <div id="content" class="panel-collapse collapse in">
                                    <div class="panel-body">
                                        <div id="owl-popular-posts" class="owl-carousel owl-item-gap-sm">

                                            <div class="item" ng-repeat="image in images" post-repeat-directive>
                                                <a href="#">
                                                    <figure>
                                                        <img ng-src="[[image.thumb]]" alt="">
                                                    </figure>
                                                </a>
                                            </div><!-- /.item -->

                                        </div><!-- /.owl-carousel -->
                                    </div><!-- /.panel-body -->
                                </div><!-- /.content -->

                            </div><!-- /.panel -->
                        </div><!-- /.accordion -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container -->
        </section>

        
    
        <div ng-if="courses.length>0" class="row inner-xs">
            <div class="col-sm-7 inner-top-xs inner-right-xs animated">
                <h2>Courses and Degrees</h2>
                <div ng-repeat="course in courses">[[ course.name ]], [[course.level.name ]]</div>
                <div class="inner-xs"><pagination ng-if="total_items>items_per_page" total-items="total_items" ng-model="filters.page" ng-change="page_changed()" items-per-page="items_per_page" max-size="5" rotate="false"></pagination>
                </div>
            </div>
        </div>
    </div>
</section>
